<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <link rel="stylesheet" href="/layim/src/css/modules/layim/layim.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
    <div class="layui-layer layui-layer-page layui-box layui-layim-chat" id="layui-layer2" type="page" times="2"
        showtime="0" contype="string"
        style="z-index: 19891016; width: 800px; top: 20%; left: 30%; position: fixed; min-width: 500px; min-height: 420px; background-image: url(&quot;http://192.168.33.10:9502/layim/dist/css/modules/layim/skin/5.jpg&quot;);">
        <div class="layui-layer-title" style="cursor: move;">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">&#8203;</font>
            </font>
        </div>
        <div id="layui-layim-chat" class="layui-layer-content">
            <ul class="layui-unselect layim-chat-list" style="height: 520px; display: block;margin-top: 80px;">
                <li class="layim-friend100001 layim-chatlist-friend100001 layim-this" layim-event="tabChat"><img
                        src="http://tp1.sinaimg.cn/1571889140/180/40030060651/1"><span>
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">测试1</font>
                        </font>
                    </span><i class="layui-icon" layim-event="closeChat">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">H</font>
                        </font>
                    </i></li>
                <li class="layim-friend108101 layim-chatlist-friend108101" layim-event="tabChat"><img
                        src="http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg"><span>
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">测试2</font>
                        </font>
                    </span><i class="layui-icon" layim-event="closeChat">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">H</font>
                        </font>
                    </i></li>
            </ul>
            <div class="layim-chat-box" style="margin-left: 200px;">
                <div class="layim-chat layim-chat-friend layui-show">
                    <div class="layui-unselect layim-chat-title">
                        <div class="layim-chat-other"><img class="layim-friend100001"
                                src="http://tp1.sinaimg.cn/1571889140/180/40030060651/1"><span
                                class="layim-chat-username" layim-event="">测试1 </span>
                            <p class="layim-chat-status"></p>
                        </div>
                    </div>
                    <div class="layim-chat-main" style="height: 262px;">
                        <ul></ul>
                    </div>
                    <div class="layim-chat-footer">
                        <div class="layim-chat-textarea"><textarea></textarea></div>
                        <div class="layim-chat-bottom">
                            <div class="layim-chat-send">
                                <span class="layim-send-btn" layim-event="send">发送</span>
                                <span class="layim-send-set" layim-event="setSend"lay-type="show">
                                    <em class="layui-edge"></em>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layim-chat layim-chat-friend">
                    <div class="layui-unselect layim-chat-title">
                        <div class="layim-chat-other"><img class="layim-friend108101"
                                src="http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg"><span
                                class="layim-chat-username" layim-event="">测试2 </span>
                            <p class="layim-chat-status"></p>
                        </div>
                    </div>
                    <div class="layim-chat-main" style="height: 262px;">
                        <ul></ul>
                    </div>
                    <div class="layim-chat-footer">
                        <div class="layim-chat-textarea"><textarea></textarea></div>
                        <div class="layim-chat-bottom">
                            <div class="layim-chat-send">
                                <span class="layim-send-btn" layim-event="send">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">发送</font>
                                    </font>
                                </span>
                                <span class="layim-send-set" layim-event="setSend" lay-type="show">
                                    <em class="layui-edge"></em>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="layui-layer-setwin">
            <a class="layui-layer-min" href="javascript:;"><cite></cite></a>
            <a class="layui-layer-ico layui-layer-max" href="javascript:;"></a>
            <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
        </span>
        <span class="layui-layer-resize"></span>
    </div>
    <div class="layui-layer layui-layer-page layui-box layui-layim-chat" 
        id="layui-layer2" type="page" times="2"
        showtime="0" contype="string"
        style="display:none;z-index: 19891016; width: 600px; top: 20%;position: fixed; left: 30%; min-width: 500px; min-height: 420px; background-image: url(&quot;http://192.168.33.10:9502/layim/dist/css/modules/layim/skin/5.jpg&quot;);">
        <div class="layui-layer-title" style="cursor: move;">&#8203;</div>
        <div id="layui-layim-chat" class="layui-layer-content">
            <ul class="layui-unselect layim-chat-list">
                <li class="layim-group101 layim-chatlist-group101 layim-this" layim-event="tabChat">
                    <img src="/static/image/test.jpg"><span>聊天室</span>
                </li>
            </ul>
            <div class="layim-chat-box">
                <div class="layim-chat layim-chat-group layui-show">
                    <div class="layui-unselect layim-chat-title">
                        <div class="layim-chat-other">
                            <img class="layim-group101" src="/static/image/test.jpg">
                            <span class="layim-chat-username" layim-event="groupMembers">聊天室</span>
                        </div>
                    </div>
                    <div class="layim-chat-main">
                        <ul>
                        </ul>
                    </div>
                    <div class="layim-chat-footer">
                        <div class="layim-chat-textarea"><textarea></textarea></div>
                        <div class="layim-chat-bottom">
                            <div class="layim-chat-send">
                                <span class="layim-send-send" layim-event="send">发送</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../main.js"></script>
    <script>
        jQuery.fn.extend({
            /**
            * ctrl+enter提交表单
            * @param {Function} fn 操作后执行的函数
            * @param {Object} thisObj 指针作用域
            */
            ctrlSubmit: function (fn, thisObj) {
                var obj = thisObj || this;
                var stat = false;
                return this.each(function () {
                    $(this).keyup(function (event) {
                        //只按下ctrl情况，等待enter键的按下
                        if (event.keyCode == 17) {
                            stat = true;
                            //取消等待
                            setTimeout(function () {
                                stat = false;
                            }, 300);
                        }
                        if (event.keyCode == 13 && (stat || event.ctrlKey)) {
                            fn.call(obj, event);
                        }
                    });
                });
            }
        });
    </script>
    <script>
        var wsUrl = 'ws://192.168.33.10:9502';
        var websocket = new WebSocket(wsUrl);
        websocket.onopen = function (evt) {
            console.log('建立连接');
        }
        websocket.onmessage = function (evt) {
            var data = JSON.parse(evt.data);
            console.log(data);
            var html = '<li>';
            var cate = '<cite>' + data.nickname + '<i>' + data.time + '</i></cite>';
            if (data.status == 0) {
                html = '<li class="layim-chat-system"><span>' + data.nickname + '加入群聊</span></li>';
            } else {
                var nickname = $.cookie('nickname');
                if (data.nickname == nickname) {
                    html = '<li class="layim-chat-mine">';
                    cate = '<cite><i>' + data.time + '</i>' + data.nickname + '</cite>';
                }
                html += '<div class="layim-chat-user"><img src="' + data.avatar + '">' + cate + '</div><div class="layim-chat-text">' + data.message + '</div></li>';
            }
            $('.layim-chat-main ul').append(html);
            $('.layim-chat-main').scrollTop($('.layim-chat-main').scrollTop() + 100);
        }
        websocket.onclose = function (evt) {
            console.log('连接关闭');
        }
        $('.layim-chat-send').click(function () {
            push();
        })
        $(".layim-chat-textarea textarea").ctrlSubmit(function (event) {
            push();
        });
        function push() {
            var message = $('.layim-chat-textarea textarea').val();
            var data = {
                'token': $.cookie('token'),
                'message': message,
            }
            websocket.send(JSON.stringify(data));
            $('.layim-chat-textarea textarea').val('');
        }
    </script>
</body>

</html>